<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script type="text/babel">
      class Home extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            name: '张三',
            age: 88
          }
        }
        // 组件挂载前
        componentWillMount() {
          // 操作数据   ajax请求
          var myname = document.getElementById('myname')
          console.log(myname)
          console.log(this.state)
          console.log('组件挂载前')
        }
        changeAge() {
          // 改变state的数据
          this.setState({
            age: 18,
            name: '小李'
          })
        }
        render() {
          console.log('组件渲染中')
          //渲染中
          return (
            <div>
              <div id="myname">我的名字：{this.state.name}</div>
              <div>我的年龄：{this.state.age}</div>
              <div>我的性别：{this.props.sex}</div>
              <button onClick={this.changeAge.bind(this)}>改变年龄</button>
            </div>
          )
        }
        //组件挂载完成的 生命周期钩子函数  相当于 window.onload
        componentDidMount() {
          var myname = document.getElementById('myname')
          myname.innerHTML = '阿坤'
          console.log('组件挂载完成')
        }
        // 组件更新前调用的函数
        // shouldComponentUpdate(nextProps, nextState) {
        //   // nextProps, nextState 最新state和props
        //   console.log(nextProps, nextState)

        //   return false
        // }
        static getDerivedStateFromProps() {
          // 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用
        }
        //组件更新后
        componentDidUpdate(prevProps, prevState, snapshot) {
          console.log(prevProps) //以前的props
          console.log(prevState) //以前的state
          console.log(snapshot)
          console.log('组件更新后')
          // console.log(this.props.sex)
          // console.log(snapshot)
          //可以获取最新的dom
          // 组件更新后
          // console.log(document.getElementById('box').innerHTML)
        }
        getSnapshotBeforeUpdate(prevProps, prevState) {
          //在最近一次渲染输出（提交到 DOM 节点）之前调用
          return '你好'
        }
        //组件卸载前
        componentWillUnmount() {
          console.log('组件卸载前')
        }
        //
      }
      ReactDOM.render(<Home sex="男" />, document.getElementById('app'))
    </script>
  </body>
</html>
